import React from "react";
import { Card, Row, Col, Button, Icon, Radio } from "antd";
import { RadioChangeEvent } from "antd/lib/radio/interface";
import "./index.less";
interface IProp {}

interface IState {
	loading: boolean;
	size: any;
}

type ButtonSize = "small" | "default" | "large" | undefined;

class UIButton extends React.Component<IProp, IState> {
	constructor(props: IProp, state: IState) {
		super(props, state);
		this.state = {
			loading: true,
			size: "default"
		};
	}

	handleClose = (): void => {
		this.setState({
			loading: !this.state.loading
		});
	};

	handleChange = (e: RadioChangeEvent): void => {
		this.setState({
			size: e.target.value
		});
	};

	render() {
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>UI Button</h1>
				</div>
				<Card title="基本按钮" className="button-wrap">
					<Row>
						<Col span={12}>
							<Button type="primary">button</Button>
							<Button type="default">button</Button>
							<Button type="link">button</Button>
							<Button type="ghost">button</Button>
							<Button type="dashed">button</Button>
							<Button type="danger">button</Button>
							<Button disabled={true}>不可用按钮</Button>
						</Col>
					</Row>
				</Card>
				<Card title="图形按钮" className="button-wrap">
					<Row>
						<Col span={24}>
							<Button icon="plus" type="primary">
								新增
							</Button>
							<Button icon="delete">删除</Button>
							<Button icon="search">查找</Button>

							<Button icon="search" shape="circle" type="primary"></Button>
							<Button icon="search" shape="round">
								查找
							</Button>
							<Button icon="search" shape="circle-outline">
								查找
							</Button>
						</Col>
					</Row>
				</Card>
				<Card title="loading按钮" className="button-wrap">
					<Row>
						<Col span={24}>
							<Button type="primary" loading={this.state.loading}>
								增
							</Button>

							<Button icon="search" type="primary" shape="circle" loading={this.state.loading}></Button>
							<Button icon="plus" shape="circle" type="primary" loading={this.state.loading}></Button>
							<Button icon="delete" shape="round" loading={this.state.loading}></Button>
							<Button icon="search" shape="circle-outline" loading={this.state.loading}></Button>
							<Button type="primary" onClick={this.handleClose}>
								关闭
							</Button>
						</Col>
					</Row>
				</Card>
				<Card title="按钮组" className="row-wrap">
					<Row>
						<Col span={24}>
							<Button.Group>
								<Button icon="left" type="primary">
									前进
								</Button>
								<Button icon="right" type="primary">
									后退
								</Button>
							</Button.Group>
						</Col>
					</Row>
					<Row>
						<Col span={24}>
							<Button.Group>
								<Button type="primary">
									<Icon type="left" />
									前进
								</Button>
								<Button type="primary">
									后退
									<Icon type="right" />
								</Button>
							</Button.Group>
						</Col>
					</Row>
				</Card>
				<Card title="按钮大小" className="button-wrap">
					<Row>
						<Col span={24}>
							<Radio.Group value={this.state.size} onChange={this.handleChange}>
								<Radio value="small">小</Radio>
								<Radio value="default">中</Radio>
								<Radio value="large">大</Radio>
							</Radio.Group>

							<Button type="primary" size={this.state.size}>
								button
							</Button>
							<Button type="primary" size={this.state.size}>
								button
							</Button>
							<Button type="primary" size={this.state.size}>
								button
							</Button>
							<Button type="primary" size={this.state.size}>
								button
							</Button>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default UIButton;
